import { defineStore } from 'pinia'
import { useStorage } from "@vueuse/core";
import { ref } from "vue";

type Theme = 'auto'|'light'|'dark'
type Store = {
  theme: Theme
  language: string
  color: string
}

export const useAppStore = defineStore('app', ()=>{
  const app = useStorage<Store>('quick-admin',{
    theme: 'auto',
    language: 'zh_CN',
    color: '#4497fa',
  })

  const getColor = ()=>{
    return app.value.color
  }

  const collapsed = ref(false)

  const onCollapsed = ()=>{
    collapsed.value = !collapsed.value
  }

  return {
    app,
    collapsed,
    getColor,
    onCollapsed
  }
})